export default {
  data () {
    return {
      bgData: [],
      projectSafetyData: [],
      deviceSafetyOption: {
        title: {
          text: '50%',
          x: 'center',
          y: '45%',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
            color: '#00e8ff'
          }
        },
        series: [
          {
            name: '背景',
            type: 'pie',
            radius: ['120%', '140%'],
            center: ['50%', '75%'],
            z: 1,
            data: [],
            silent: true,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              borderWidth: 0
            },
            emphasis: {
              show: false
            }
          },
          {
            name: '占比',
            type: 'pie',
            radius: ['120%', '140%'],
            center: ['50%', '75%'],
            startAngle: 270,
            z: 2,
            data: [],
            silent: true,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              borderWidth: 0
            },
            emphasis: {
              show: false
            }
          }]
      }
    }
  },
  methods: {
    initProjectSafety () {
      this.bgData = []
      this.projectSafetyData = []
      this.initBgData(this.bgData)
      this.initBgData(this.projectSafetyData)
      this.initProjectSafetyData(this.projectSafetyData)
      this.deviceSafetyOption.title.text = `${(this.safetyculter.problempercent * 100).toFixed(2)}%`
      this.deviceSafetyOption.series[0].data = this.bgData
      this.deviceSafetyOption.series[1].data = this.projectSafetyData
      if (!this.projectSafetyEchart) {
        this.projectSafetyEchart = this.$echarts.init(this.$refs.projectSafetyEchart)
      }
      this.projectSafetyEchart.setOption(this.deviceSafetyOption)
    },
    initBgData (items) {
      for (let i = 1; i <= 90; i++) {
        let data = {
          value: 1,
          name: 'bg',
          itemStyle: {
            color: ''
          },
          emphasis: {
            show: false
          }
        }
        if (i % 2 === 0) {
          data.itemStyle.color = '#09283b'
        } else {
          data.itemStyle.color = '#7b7b7b'
        }
        items.push(data)
      }
    },
    initProjectSafetyData () {
      let SafetyIndex = 0
      let length = 30 * this.safetyculter.problempercent
      this.projectSafetyData.forEach((item, index) => {
        if (index <= 15 || index >= 75) {
        } else {
          if (SafetyIndex < length && item.itemStyle.color === '#7b7b7b') {
            item.itemStyle.color = '#00e8ff'
            SafetyIndex++
          }
        }
      })
    }
  }
}
